/**
 * 自定义组件 子级组件向父级组件传参
 */

Vue.component("show",{
    template: `
        <div>
            <button @click="onClick" >显示余额</button>
        </div>  
    `, 
    methods: {
        onClick : function(){
            console.log('click')
            this.$emit("show-balance", {price :100 } )
        }
    }
})
Vue.component("balance", {
    template: `
        <div>
            <div v-if="show">{{price}}元</div>
            <show @show-balance="showBalance"></show>
        </div>
    `,
    data : function(){
        return {
            show :false,
            price : 0 
        }
    },
    methods: {
        showBalance : function( price){
            console.log('show')
            this.price = price.price
            this.show = !this.show
        }   
    } 
})


var app = new Vue({
    el : "#app"
})